<template>
  <div class="withdrawal">
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
      >
        <el-form-item label="支付宝账号">
          <el-input
            v-model="searchForm.adminMobile"
            placeholder="请输入支付宝账号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.status"
            placeholder="全部"
            clearable
          >
            <el-option
              label="待审核"
              :value="1"
            ></el-option>
            <el-option
              label="已入账"
              :value="2"
            ></el-option>
            <el-option
              label="未入账"
              :value="3"
            ></el-option>
            <el-option
              label="提现拒绝"
              :value="4"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间">
          <my-date-picker ref="myDatePicker"></my-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div class="child_page">
      <el-table
        border
        :data="tableData"
      >
        <el-table-column
          align="center"
          prop="id"
          label="编号"
        />
        <el-table-column
          align="center"
          label="账户类型"
        >
          <span>租金账户</span>
        </el-table-column>
        <el-table-column
          align="center"
          label="提现方式"
        >
          <template slot-scope="scope">
            <span>{{scope.row.pay_type==1?'支付宝':''}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="alipay_trade_no"
          label="流水号"
        />
        <el-table-column
          align="center"
          prop="withdrawal_amount"
          label="提现金额"
        />
        <el-table-column
          align="center"
          prop="payee_account"
          label="支付宝账号"
        />
        <el-table-column
          align="center"
          label="收款人姓名"
          prop="payee_name"
        />
        <el-table-column
          align="center"
          prop="apply_time"
          label="申请时间"
          width="100"
        />
        <el-table-column
          align="center"
          label="状态"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status==1?'':scope.row.status==2||scope.row.status==3?'success':'danger'">{{scope.row.status==1?'待审核':scope.row.status==2?'已入账':scope.row.status==3?'未入账':'提现拒绝'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="原因"
        >
          <template slot-scope="scope">
            <span class="red-font">{{scope.row.refuse_reason}}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="140"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasMethod('#view')"
              type="primary"
              size="mini"
              @click="viewItem(scope.row.id)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <custom-page
        ref="customPage"
        :total="total"
        @getList="getList"
      ></custom-page>
    </div>
  </div>
</template>

<script>
import customPage from "@/components/customPage";
import myDatePicker from "@/components/myDatePicker";
import { withdrawalList } from "@/api/finance";
export default {
  components: { customPage, myDatePicker },
  data() {
    return {
      searchForm: {
        adminMobile: '',
        status: '',
        arrivalTime: ''
      },
      tableData: [],
      total: 0
    }
  },
  methods: {
    viewItem(id) {
      this.$router.push({ name: 'myWithdraw', params: { withdrawId: id } });
    },
    // 获取数据
    getList() {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage;
      withdrawalList({
        page,
        pageSize,
        ...this.searchForm
      }).then(res => {
        this.tableData = res.data || [];
        this.total = res.total || 0;
      })
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal();
      if (pickerVal !== 'error') {
        this.searchForm.arrivalTime = pickerVal;
        this.$refs.customPage.page = 1;
        this.getList();
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset();
      }
      this.searchForm = {
        adminMobile: '',
        status: '',
        arrivalTime: ''
      };
      this.getList();
    }
  },
  mounted() {
    this.getList();
  }
}
</script>

<style lang="scss" scoped>
.common_form_search {
  padding: 15px 15px 0 15px;
  background-color: #ffffff;
  border-radius: 0 0 10px 10px;
}
.child_page {
  padding: 15px;
}
</style>